<template>
	<view class="technician-list-item">

		<view class="list-item flex-center pd-lg fill-base radius-16 rel" style="margin-bottom: 30rpx;">
			<image mode="aspectFill" class="king-img abs" src="https://lbqny.migugu.com/admin/anmo/mine/king.gif"
				v-if="info.coach_type_status==1">
			</image>
			<view class="flex-center flex-column">
				<view class="item-img rel">
					<!-- #ifdef H5 -->
					<view class="item-img radius">
						<view @tap.stop="toPreviewImage('work_img')" class="h5-image item-img radius"
							:style="{ backgroundImage : `url('${info.work_img}')`}">
						</view>
					</view>
					<view @tap.stop="info.coach_type_status==1?toPreviewImage('work_img'):''" class="h5-image abs"
						:class="[`${imgType[info.coach_type_status]}-img`]"
						:style="{ backgroundImage :  info.coach_type_status === 3? `url('https://lbqny.migugu.com/admin/anmo/mine/${imgType[info.coach_type_status]}.png')` : `url('https://lbqny.migugu.com/admin/anmo/mine/${imgType[info.coach_type_status]}.gif')`}"
						v-if="info.coach_type_status">
					</view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<image @tap.stop="toPreviewImage('work_img')" mode="aspectFill" class="item-img radius"
						:src="info.work_img">
					</image>
					<image @tap.stop="info.coach_type_status==1?toPreviewImage('work_img'):''" class="abs"
						:class="[`${imgType[info.coach_type_status]}-img`]"
						:src=" info.coach_type_status === 3 ? `https://lbqny.migugu.com/admin/anmo/mine/${imgType[info.coach_type_status]}.png` : `https://lbqny.migugu.com/admin/anmo/mine/${imgType[info.coach_type_status]}.gif`"
						v-if="info.coach_type_status">
					</image>
					<!-- #endif -->
				</view>
				<view class="item-tag flex-center f-icontext c-base radius-20"
					:style="{background: info.text_type === 1 ? service_btn_color : info.text_type == 3?primaryColor: info.text_type==4?'#e1493b':'',color:info.text_type === 1 ? service_font_color :[3,4].includes(info.text_type) ? '#fff' : ''}">
					{{textType[info.text_type]}}
				</view>
			</view>
			<view class="flex-1 ml-md max-510">
				<view class="flex-between">
					<view @tap.stop="goInfo">
						<view class="flex-y-center f-title c-title">
							<view class="text-bold max-200 ellipsis">{{info.coach_name}}</view>
							<view @tap.stop="toPreviewImage('self_img')" class="more-img flex-center ml-sm f-icontext ml-lg"
								:style="{color:primaryColor,border:`1rpx solid ${primaryColor}`}">生活照</view>								
						</view>
						<view class="flex-y-center f-icontext mt-sm">
							<view class="flex-y-center"><i class="iconfont iconyduixingxingshixin icon-font-color"></i>
								<view class="star-text">{{info.star}}</view>
							</view>
							<view class="order-num">
								已服务 {{info.order_num > 9999 ? '9999+' : info.order_num}}单</view>						
						</view>	
						<view class="flex-y-center f-icontext mt-sm mb-sm">
							<view class="flex-center">
								<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
								<view class="f-desc c-title ml-sm">{{info.distance}}</view>
							</view>						
						</view>							
					</view>
					<view class="can-service-btn f-caption c-base radius-10" :style="{border:`2rpx solid ${primaryColor}`}" v-if="info.near_time">
						<view class="text" :style="{background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`}">最早可约</view>
						<view class="time" :style="{color:primaryColor}">{{'时间'+info.near_time+''}}</view>
					</view>
				</view>			
				<view class="flex-between">
					<view class="flex-y-center f-desc c-caption">
						<view @tap.stop="goInfo" class="flex-y-center">
							<block v-if="from!='collect' && plugAuth.store && info.store && info.store.id">
								<i class="iconfont iconshangjia_1 c-caption mr-sm"></i>
								商家
							</block>
							<block v-else-if="from!='collect' && info.admin_id && info.admin_name && merchantAuth">
								<i class="iconfont iconshangjia_1 c-caption mr-sm"></i>
								{{info.admin_name}}
							</block>
							<block v-else>
								<i class="iconfont iconxiangqing c-caption mr-sm"></i>
								详情
							</block>
						</view>
						<view @tap.stop="toEmit('comment')" class="flex-y-center ml-lg"><i
								class="iconfont iconpinglun mr-sm"></i>{{info.comment_num > 9999 ? '9999+':info.comment_num}}
						</view>
						<view @tap.stop="toEmit('collect')" class="flex-y-center ml-lg"><i class="iconfont mr-sm"
								:class="[{'iconshoucang1':!info.is_collect},{'iconshoucang2':info.is_collect}]"
								:style="{color:info.is_collect ? primaryColor :''}"></i>{{info.collect_num > 9999 ? '9999+':info.collect_num}}
						</view>						
					</view>
					<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
						:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toEmit('order')" style="width:130rpx;">
						<view class="item-btn flex-center f-desc c-base"
							:style="{background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`}">
							预约TA
						</view>
					</auth>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		props: {
			from: {
				type: String,
				default () {
					return 'list'
				}
			},
			info: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				imgType: {
					1: 'top',
					2: 'hot',
					3: 'new'
				},
				textType: {
					1: '可服务',
					2: '服务中',
					3: '可预约',
					4: '不可预约'
				}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			plugAuth: state => state.config.configInfo.plugAuth,
			merchantAuth: state => state.config.merchantAuth,
			service_btn_color: state => state.config.configInfo.service_btn_color,
			service_font_color: state => state.config.configInfo.service_font_color,
			userInfo: state => state.user.userInfo,
		}),
		methods: {
			toPreviewImage(key) {
				let urls = this.info[key]
				if (key == 'work_img') {
					urls = [urls]
				}
				this.$util.previewImage({
					current: urls[0],
					urls
				})
			},
			// 技-师详情
			goInfo() {
				let {
					id,
					store = {},
					admin_id = 0,
					admin_name
				} = this.info
				let {
					from,
					plugAuth = {},
					merchantAuth = 0
				} = this
				this.$util.goUrl({
					url: from != 'collect' && plugAuth.store && store && store.id ?
						`/shopstore/pages/detail?id=${store.id}` : from != 'collect' && merchantAuth && admin_id &&
						admin_name ? `/user/pages/merchant-info?id=${admin_id}` :
						`/user/pages/technician-info?id=${id}`
				})
			},
			toEmit(key) {
				this.$emit(key)
			}
		}
	}
</script>

<style scoped lang="scss">
	.technician-list-item {

		.list-item {
			box-sizing: border-box;
			.top-tag {
				width: 40rpx;
				height: 30rpx;
				color: #B75E1D;
				background: linear-gradient(90deg, #DFB885 0%, #FCE0AD 100%);
				border-radius: 8rpx 0 8rpx 0;
				top: 0;
				left: 0;
			}

			.item-img {
				width: 124rpx;
				height: 124rpx;
			}

			.king-img {
				width: 90rpx;
				height: 90rpx;
				top: 110rpx;
				left: -15rpx;
				z-index: 1;
			}


			.top-img {
				width: 146rpx;
				height: 140rpx;
				top: -7rpx;
				left: -11rpx;
			}

			.hot-img {
				width: 75rpx;
				height: 51rpx;
				top: 77rpx;
				left: 25rpx;
			}

			.new-img {
				width: 38rpx;
				height: 52rpx;
				top: 83rpx;
				left: 78rpx;
			}

			.item-tag {
				width: 100rpx;
				height: 32rpx;
				color: #000;
				background: rgba(216, 216, 216, 0.3);
				margin-top: 19rpx;
				margin-bottom: 6rpx;
			}

			.more-img {
				width: 94rpx;
				height: 33rpx;
				border-radius: 3px;
				transform: rotateZ(1turn);
			}

			.can-service-btn {
				height: 80rpx;
				margin-bottom: 30rpx;
				width: 130rpx;

				.bg {
					width: 64rpx;
					height: 28rpx;
					opacity: 0.1;
					border-radius: 3rpx;
					top: 0;
					left: 0;
					z-index: 1;
				}
				.text {
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					width: 100%;
				}
				
				.time {
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					width: 100%;
				}				
			}

			.iconyduixingxingshixin {
				font-size: 28rpx;
				background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
			}

			.star-text {
				color: #FF9519;
				margin-left: 6rpx;
			}

			.order-num {
				color: #4D4D4D;
				margin-left: 16rpx;
			}

			.item-btn {
				width: 130rpx;
				height: 52rpx;
				border-radius: 100rpx;
			}
		}
	}
	.pd-lg{padding:0 30rpx;}
</style>